<template>
   <Head>
      <Title>消息中心</Title>
      <Meta name="keywords" content="消息中心" />
      <Meta name="description" content="消息中心" />
   </Head>
   <div class="cnyzs-message GradientAnimation">
      <div class="message-menu">
         <ul class="menu">
            <li class="title">消息中心</li>
            <li class="li" :class="{ liactive: liactive === 0 }" @click="liactive = 0">
               <span class="iconfont icon-pinglun"></span>
               <span>评论回复</span>
               <span class="unread" v-if="unreadTotal">{{ unreadTotal }}</span>
            </li>
            <li class="li" :class="{ liactive: liactive === 1 }" @click="liactive = 1">
               <span class="iconfont icon-dianzan"></span>
               <span>收到点赞</span>
            </li>
            <!-- <li class="li" :class="{ liactive: liactive === 2 }" @click="liactive = 2">
               <span class="iconfont icon-xiaoxi7"></span>
               <span>我的私信</span>
            </li> -->
            <li class="li" :class="{ liactive: liactive === 3 }" @click="liactive = 3">
               <span class="iconfont icon-chuangzuozhezhongxin"></span>
               <span>系统通知</span>
            </li>
            <li class="li" :class="{ liactive: liactive === 4 }" @click="liactive = 4">
               <span class="iconfont icon-xitongshezhi"></span>
               <span>消息设置</span>
            </li>
         </ul>
         <div class="menu-2">
            <img
               :src="UtilsImage('https://alan-1252409695.cos.ap-guangzhou.myqcloud.com/images%2Fwallhaven-eomv8l.png')" />
         </div>
      </div>
      <div class="message-content">
         <CommentReplyVue v-if="liactive === 0" />
         <LikeVue v-if="liactive === 1" />
         <MyMessageVue v-if="liactive === 2" />
         <SystemMessageVue v-if="liactive === 3" />
         <MessageSettingVue v-if="liactive === 4" />
      </div>
   </div>
</template>
<script lang="ts" setup >
import CommentReplyVue from "./CommentReply.vue"
import LikeVue from "./Like.vue"
import MyMessageVue from "./MyMessage.vue"
import SystemMessageVue from "./SystemMessage.vue"
import MessageSettingVue from "./MessageSetting.vue"
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
const { commentReply, unreadTotal } = storeToRefs(cnyzsUserpinia())
const { cnyzs } = storeToRefs(cnyzsCommonpinia())
const route = useRoute()
const liactive = ref(0)
Utils.islogin() // 判断是否登录
onMounted(() => {
   document.body.style.setProperty('--aoir-color-primary', cnyzs.value.COMMON_THEMECOLOR);
})
</script>
<style lang="scss" scoped>
.cnyzs-message {
   width: var(--aoir-m-width);
   margin: 0 auto 20px;
   display: flex;

   .message-menu {
      width: 250px;
      margin-right: 16px;

      .menu {
         width: 100%;
         background-color: #FFF;
         padding: 20px;
         border-radius: var(--aoir-border-radius);
         box-shadow: var(--aoir-box-shadow);
         margin-bottom: 16px;

         .title {
            font-size: 20px;
            width: 100%;
            padding-bottom: 15px;
            border-bottom: 1px solid #eeeeee81;
            margin-bottom: 10px;
         }

         .li {
            width: 100%;
            padding: 10px 20px;
            border-radius: 8px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            position: relative;

            .unread {
               position: absolute;
               right: 18px;
               top: 50%;
               transform: translateY(-50%);
               font-size: 12px;
               font-weight: 600;
               border-radius: 50px;
               padding: 0 5px;
               background-color: #000;
               color: #FFF;
               background-color: red;
               border: 1.5px solid rgba(255, 255, 255, 0.5803921569);
            }

            span {
               &:nth-child(1) {
                  margin-right: 12px;
                  font-size: 19px;
                  font-weight: 900;
                  // background: #e1e1e1;
                  border-radius: 50%;
                  color: var(--aoir-color-primary);
               }
            }

            &:hover {
               transition: all .3s ease-in-out;
               background-color: #E3E5E7;
               cursor: pointer;
            }

            &:nth-last-child(1) {
               margin: 0;

               span {
                  &:nth-child(1) {
                     font-size: 18px;
                  }
               }
            }
         }

         .liactive {
            background-color: #E3E5E7;

            // span {
            //    color: var(--aoir-color-primary);
            // }
         }
      }

      .menu-2 {
         width: 100%;
         height: 140px;
         background-color: #FFF;
         box-shadow: var(--aoir-box-shadow);
         border-radius: var(--aoir-border-radius);
         box-shadow: 0px 0px 40px 0px rgb(181 181 181 / 70%);

         img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--aoir-border-radius);
         }
      }
   }

   .message-content {
      flex: 1;
      min-height: 734px;
   }
}
</style>